<template>
  <!-- 页面的结构 -->
  <!-- 只能写一个根标签div -->
  <div>
    <!-- <h1>hello vue</h1>
    <h2>{{ msg }}</h2>
    <h3>{{ date }}</h3>
    <input type="text" v-model="msg" name="" id="" /> -->
    <!-- 需要一个boolean值 -->
    <!-- <div v-if="date%2==0">  
        {{msg}}
    </div> -->
    <!--  -->
    <!-- 判断v-if输入的值 -->
    <!-- <p v-if="val">{{val.slice(0,1)+"先生你好"}}</p> -->
    <!-- <input type="text" v-model="val">  收集表单信息 -->
    <!-- v-once数据更新一次,标签内容不再变化 -->
    <!-- <p v-once>{{ date }}</p> -->
    <!-- v-html -->
    <!-- 等同于inner HTML -->
    <!-- <p v-html="html"></p> -->
    <!-- 属性操作 -->
    <!-- <p v-bind:id="myid"></p> -->
    <!-- <img v-bind:src="imgsrc" alt="" /> -->
    <!-- <a href="href"></a> -->
    <!-- <button v-bind:disabled="isbutton">按钮</button> -->
    <!-- <button @click="clk" v-bind:disabled="isbutton">事件按钮</button> -->
    <!-- <p v-html="text"></p>
    <button @click="yincang">切换显示隐藏</button> -->
    <!-- <button @click="jia">+</button><span>{{ n }}</span
    ><button @click="jian">-</button> -->
    <!-- <p v-if="show">你好</p>
    <p v-else>hello</p> -->
    <!-- <p v-if="type === 'B'">你好</p>
    <p v-else-if="type === 'A'">看嘛呢</p>
    <p v-else>hello</p> -->

    <!-- v-for -->
    <!-- <ul>
      <li v-for="item in arr"  v-if="item%2==0" :key="item" >{{item}}</li>
    </ul> -->

    <!-- v-for中对象 -->
    <!-- <ul>
      <li v-for="value in object">{{value}}</li>
    </ul> -->

    <!-- <ul>
      循环打印
      <li v-for="value in arr1" :key="value">{{ value.title }}</li>
    </ul>
    <input type="text" v-model="val" /> <button @click="qiche">添加车型</button> -->
      <router-view></router-view>
  </div>

</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
h1 {
  background: pink;
}
</style>

<script>
/* 导出export default 导入 import */
export default {
  data() {
    /* 声明数据 */
    return {
      object: {
        title: "宝马",
        title1: "保时捷",
        title2: "五菱宏光",
      },
      arr1: [{ title: "宝马" }, { title: "保时捷" }, { title: "五菱宏光" }],
      arr: [1, 2, 3, 4, 5, 6],
      val: "",
      a: 10,
      msg: "hello vue",
      date: "当前时间",
      show: false,
      html: "<h1>vue</h1>",
      myid: "my_id",
      text: "<h1>你好</h1>",
      /* 把路径当变量使用需要加require */
      imgsrc: require("./assets/logo.png"),
      href: "www.baidu.com",
      isbutton: false,
      n: 0,
      type: "A",
      item: "",
    };
  },
  methods: {
    // yincang() {
    //   this.shou=!this
    // },
    // yincang() {
    //   if (this.show) {
    //     this.text = "";
    //     this.show = false;
    //   } else {
    //     this.show = true;
    //     this.text = "<h1>你好</h1>";
    //   }
    // },
    // jia() {
    //   this.n++;
    // },
    // jian() {
    //   this.n--;
    // },
    // clk() {
    //   console.log(this.clk.disabled);
    //   this.isbutton = true;
    // },
    qiche() {
      if (this.val.length > 0) {
        this.arr1.push({ title: this.val });
        this.val = "";
      } else {
        alert("请输入");
      }
    },
  },
  /* 生命周期函数 在组件从被创建到被销毁的过程中自动调用 */
  /* 创建之前先打印 */
  beforeCreate() {
    console.log("组件被创建之前");
    setInterval(() => {
      this.date = new Date().getSeconds();
      console.log(this.date);
    }, 1000);
  },
  /* 之前后打印 */
  created() {
    console.log("组件被创建之前");
  },
  beforeMount() {
    console.log("渲染到页面之前");
  },
  mounted() {
    console.log("渲染到页面之后");
  },
  beforeUpdate() {
    /* 指的是数据 */
    if (this.date < 10) {
      this.date = "0" + this.date;
    }
  },
  updated() {
    // console.log("数据更新完成");
  },
  beforeDestroy() {
    /* 销毁前 */
  },
  destroyed() {
    /* 销毁后 */
  },
};
/* v-once数据更新一次,标签内容不再变化 */
/* @click点击事件 */
/* v-mode 是检测表单元素 */
/* v-show是用display显示或隐藏 */
/* v-if是删除添加元素 v-if和v-else必须挨着 */
/* v-if和v-for一起使用v-for有更高的优先级,优先执行v-for */
/* v-for(第一个是内容,第二个是下标) */
/*  v-if判断输入的值 */
/* v-bind属性操作 */
/* v-bind:class可以修改class类名 可以放变量也可以直接放true或false */
/* v-html等同于inner HTML */
/* @change勾选框选中事件 */
/* watch监听数据 */
/*  beforeDestroy销毁前 */
/* destroyed销毁后 */
/* updated数据更新完成 */
/*  beforeUpdate指的是数据 */
/* mounted渲染页面后 */
/* localStorage 本地存储 */
/* beforeMount渲染页面之前 */
/* created组件创建之后打印 */
/* beforeCreate组件创建之前打印 */
/* 通过事件修饰符找到回车键,不需要使用判断 */
/* 传参数第一个会是实参,第二个写$event还是可以查找键盘事件 */
/* computed计算属性 可以检测数据变化并返回相应的处理值 */
/* 事件修饰符 */
/* .once：只会触发一次 */
/* .self：只会触发自己范围内的事件，不包含子元素 */
/* .capture：与事件冒泡的方向相反，事件捕获由外到内 */
/* .prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为 */
/* stop代码跟event.stopPropagation()效果一样都是阻止冒泡事件 */
/* requirc自动寻找路径 */
/* router-link跳转 */
</script>

